<%-- Copyright (C) 2009 WorkSmart Labs, Inc. --%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" import="java.util.*" %>
<%@ page import="com.wsl.HealthChallenge.models.*" %>
<%-- 
    This is a simple JSP template for a test harness used to provide simple
    HTML-based testing for the GetHighScoresController. 
     
    @author artem
--%>

<!DOCTYPE html>
<html lang="en-us"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <%
  String userId = (String) request.getAttribute("userId");
  String userEmail = (String) request.getAttribute("userEmail");
  String userName = (String) request.getAttribute("userName");
  String userNickname = (String) request.getAttribute("userNickname");
  String displayedUserName = (String) request.getAttribute("displayedUserName");

  String userScore = (String) request.getAttribute("userScore");

  String challengeName = (String) request.getAttribute("challengeName");
  ContestType challengeType = (ContestType) request.getAttribute("challengeType");
  String longScoreUnitText = challengeType.displayName;
  String shortScoreUnitText = challengeType.shortDisplayName;

  String leaveChallengeUrl = (String) request.getAttribute("leaveChallengeUrl");
  String challengeDescription = (String) request.getAttribute("challengeDescription");
 
  String numParticipants = (String) request.getAttribute("numParticipants");
  boolean shouldShowNoCalorieNotification = 
      (Boolean) request.getAttribute("shouldShowNoCalorieNotification");
  
  int daysSinceStart = (Integer) request.getAttribute("daysSinceStart");
  // We don't allow zero days to prevent division by zero.
  if (daysSinceStart == 0) {
      daysSinceStart = 1;
  }

  Set<Map.Entry<String, UserStats>> topTenUsers =
      (Set<Map.Entry<String, UserStats>>) request.getAttribute("topTenUsers");
  Set<Map.Entry<String, UserStats>> closeByUsers =
      (Set<Map.Entry<String, UserStats>>) request.getAttribute("closeByUsers");
  
  %>
  <title><%=challengeName%> - WALK2.me</title>
  <link rel="stylesheet" type="text/css" href="/static/healthchallenge.css">
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->
<script type="text/javascript">
  function show_confirm() {
    var leaveChallenge = confirm('This will take you out of the challenge.');
    if (leaveChallenge==true) {
      window.location = "<%=leaveChallengeUrl%>"; 
    }
  }
</script>
</head>

<body>
  <div id="topBar"></div>
  <div id="container">
      <div id="leftColumn">
          <a id="logo" href="/static/Health Challenge-view.htm"></a>
          <div class="leftPanel dropShadow" id="userInformation">
            <p><span id="loginId"><%=userNickname%></span>
               <form action="" method="get">
                 Displayed name: 
                 <input type="text" name="displayedName" value="<%=displayedUserName%>"/>
                 <button class="submitBtn" type="submit" >Update</button>
               </form>
 <div class="labelAndInput"></div>
              Linked to Google Health account:
              <span id="emailAccount"><%=userEmail%></span>

              <a onclick="show_confirm();" >
                Stop participating in challenge and unlink your Google Health account &#62;&#62;
              </a>
              </p>
          </div>

          <div id="resourcesHowTo" class="leftPanel dropShadow">
            Getting Your Exercise Data <br>Into <b>Health Challenge</b><br>
            <div class="recordDataResource">
              <img src="/static/images/google_health_logo.png" /><br>
              Use the Google Health portal to enter your exercise information manually.<br>
              <div class="resourceLink">
                <a href="https://www.google.com/health" target="_new">GO TO GOOGLE HEALTH &#62;</a>
              </div>
            </div>
            <div class="recordDataResource">
              <img src="/static/images/cardiotrainer_logo.png" /><br>
              Exercise with the free CardioTrainer Android application and automatically upload
              data to your Google Health profile.<br>
              <div class="resourceLink">
                <a href="http://www.worksmartlabs.com/cardiotrainer/about.php" target="_new">
                GET CARDIOTRAINER FOR FREE &#62;</a>
                </div>
            </div>
            <div class="recordDataResource">
              <img src="/static/images/fitbit_logo.png" /><br>
              Buy a FitBit device to record your daily activity and upload it to 
              Google Health.<br>
              <div class="resourceLink">
                <a href="http://www.fitbit.com" target="_new">LEARN MORE ABOUT FITBIT &#62;</a>
              </div>
            </div>
          </div>
        </div>
      <div id="rightColumn" class="dropShadow">

          <div class="featuredArea">

            <h1><%=challengeName%></h1>

            <!-- -- This DIV only appears if admin entered description. ---->
            <div id="aboutTheContest" class="dropShadow">
              <% if(challengeDescription != null) { %>
              <%=challengeDescription%>
              <% } else { %>
              Challenge your friends, family, co-workers... anyone!
              <% } %>

              <!-- -- This line only appears if admin entered admin's name. ---->
              <span>(Challenge created by <%=userName%>.)</span>

            </div>
          </div>
          <div id="individualProgress">
            Since the beginning of this challenge, you have burned:
            <span class="accomplished"><%=userScore%> <%=shortScoreUnitText%></span>
            <span class="average">(average: <%=Float.valueOf(userScore)/daysSinceStart %>
                per day)</span>
          </div>

          <% if (shouldShowNoCalorieNotification) {%>
          <div class="notification">
            <div class="bubble-arrow"></div>
            <img src="/static/images/alert.png" width="23" height="21">
            <p>You haven't recorded any <%=shortScoreUnitText%> yet. 
            See left side bar for how to record some data.</p>
          </div>
          <% } %>

          <div class="standingsTable yourStanding">
            <h2>People ranked near you:</h2>
            <table cellspacing="0" cellpadding="0">
              <tbody><tr class="headerRow">
                <td>Name</td>
                <td>Total <%=longScoreUnitText%></td>
                <td>Average <%=longScoreUnitText%>/day</td>
              </tr>
              <% int rowNum = 0;
                for (Map.Entry<String, UserStats> entry : closeByUsers) { 
                  rowNum++;
                  if (entry.getKey().equals(userId)) {
                %>
                  <tr id="you">
                <% } else if (rowNum % 2 == 0){ %>
                  <tr>    
                <% } else { %>
                  <tr class="everyOtherRow">    
                <% } %>
                <td><%=entry.getValue().getName()%></td>
                <td><%=entry.getValue().getScore()%></td>
                <td><%=entry.getValue().getScore()/daysSinceStart%>/day</td>
                </tr>
              <% } %>
            </tbody>
          </table>
        </div>
          <div class="standingsTable">
            <h2>Current Top 10 (<%=numParticipants%> people participating)</h2>
            <table cellspacing="0" cellpadding="0">
              <tbody><tr class="headerRow">
                <td>Ranking</td>
                <td>Name</td>
                <td>Total <%=longScoreUnitText%></td>
                <td>Average <%=longScoreUnitText%>/day</td>
              </tr>
              <% rowNum = 0;
                for (Map.Entry<String, UserStats> entry : topTenUsers) { 
                  rowNum++;
                  if (entry.getKey().equals(userId)) {
                %>
                  <tr id="you">
                <% } else if (rowNum % 2 == 0){ %>
                  <tr>    
                <% } else { %>
                  <tr class="everyOtherRow">    
                <% } %>
                <td><%=rowNum%></td>
                <td><%=entry.getValue().getName()%></td>
                <td><%=entry.getValue().getScore()%></td>
                <td><%=entry.getValue().getScore()/daysSinceStart %>/day</td>
                </tr>
              <% } %>
            </tbody>
          </table>
        </div>
      </div>
  </div>
  <div id="footer">
    <p>Copyright 2010 Google Health Challenge</p>
  </div>
</body>
</html>